<template>
	<view class="main">
		<topCommonTitleBar :statePerchHeight="'var(--status-bar-height)'" class="tapBar" :statePerch="true"
			backgroundColor="#fff" arrow="black" dot-color="#666" :show-dot="true" @actionClick="showMore = true">
		</topCommonTitleBar>
		<view class="content" v-if="showLoad">
			<view id="content_top">
				<view class="title">{{ details.title }}</view>
				<view class="content_info">
					<view class="info_txt">发文字号：{{ details.push_number }}</view>
					<view class="info_txt">发文机关：{{ details.push_department }}</view>
					<view class="info_txt">发文日期：{{ details.push_date }}</view>
					<view class="info_txt">效力注释：{{ details.active_info }}</view>
				</view>
			</view>
			<scroll-view :scroll-y="true">
				<u-parse :lazyLoad="true" :content="details.info_content" class="content_txt"
					:style="{ fontSize: fontSize }"></u-parse>

			</scroll-view>

		</view>

		<!-- 更多弹出层 -->
		<view v-show="showMore">
			<u-popup :show="showMore" :round="15" :closeOnClickOverlay="true" :customStyle="{ backgroundColor: 'transparent' }"
				class="showMore" @close="showMore = false">
				<view class="moreList">
					<view class="item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
						<image :src="item.icon" class="icon"></image>
						<view class="title">{{ item.name }}</view>
					</view>
				</view>
				<view class="close" @click="showMore = false">取消</view>
			</u-popup>
		</view>

		<!-- 字体切换弹出 -->
		<u-popup :show="showFontSize" :round="16" :closeOnClickOverlay="true"
			:customStyle="{ backgroundColor: 'transparent' }" class="showMore" @close="showFontSize = false">
			<view class="chang_font_size">
				<view class="font_size_text">
					<view style="font-size: 26rpx" :style="{ color: fontSizeIndex == 0 ? '#1C87F3' : '' }"
						@click="changFontSize(0)">标准</view>
					<view style="font-size: 36rpx" :style="{ color: fontSizeIndex == 1 ? '#1C87F3' : '' }"
						@click="changFontSize(1)">中</view>
					<view style="font-size: 46rpx" :style="{ color: fontSizeIndex == 2 ? '#1C87F3' : '' }"
						@click="changFontSize(2)">大</view>
				</view>
				<view class="subsection">
					<view class="line_box" @click="changFontSize(0)">
						<view class="line"></view>
					</view>
					<view class="line_box" style="justify-content: center" @click="changFontSize(1)">
						<view class="line"></view>
					</view>
					<view class="line_box" style="justify-content: flex-end" @click="changFontSize(2)">
						<view class="line"></view>
					</view>
					<view class="line_x"></view>
					<view :class="['primary', fontSizeLeft]"></view>
				</view>
			</view>
			<view class="close" @click="showFontSize = false">取消</view>
		</u-popup>

	</view>
</template>

<script type="text/javascript" src="plus-confusion://../lawBank/revenue/revenueInfo"></script>

<style lang="scss">
.main {
	background: #FFFFFF;

	.tapBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.content {
		padding: 0 35rpx;
		padding-top: calc(var(--status-bar-height) + 88rpx);

		.title {
			font-weight: 700;
			color: #333333;
			line-height: 55rpx;
			font-size: 40rpx;
		}

		.content_info {
			margin: 50rpx 0 40rpx 0;
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #F2F8FF;
			border-radius: 17rpx;

			.info_txt {
				margin-bottom: 15rpx;
				font-size: 26rpx;
				color: #3A6BB3;
				line-height: 38rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.content_txt {
			font-size: 28rpx;
			color: #333333;
			line-height: 55rpx;
			letter-spacing: 2rpx;
			white-space: pre-line;
			text-indent: 2em;
		}
	}

	.moreList {
		padding: 34rpx 26rpx;
		box-sizing: border-box;
		width: 700rpx;
		margin: 12rpx auto;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 162rpx;

			&:last-child {
				margin-top: 30rpx;
			}

			&:nth-last-child(2) {
				margin-top: 30rpx;
			}

			.icon {
				width: 87rpx;
				height: 85rpx;
			}

			.title {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #646566;
			}

			::v-deep img {
				max-width: 100%;
			}
		}

	}

	.close {
		line-height: 94rpx;
		background-color: #FFFFFF;
		width: 700rpx;
		height: 94rpx;
		margin: 12rpx auto;
		margin-bottom: 34rpx;
		border-radius: 16rpx;
		text-align: center;
	}


	.chang_font_size {
		width: 700rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 12rpx auto;
		padding: 30rpx 60rpx;
		padding-bottom: 50rpx;

		.font_size_text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333333;

		}

		.subsection {
			margin: 0 22rpx;
			margin-top: 40rpx;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.line {
				width: 2rpx;
				height: 32rpx;
				background-color: #999999;
			}

			.line_x {
				height: 1rpx;
				width: 100%;
				background-color: #999999;
				position: absolute;
				left: 0;
			}

			.line_box {
				width: 60rpx;
				height: 32rpx;
				display: flex;
			}

			.primary {
				width: 38rpx;
				height: 38rpx;
				border: 8rpx solid #1C87F3;
				border-radius: 38rpx;
				background-color: #FFFFFF;
				position: absolute;
				transition: left 0.2s;
			}

			.primary1 {
				left: -17rpx;
			}

			.primary2 {
				left: calc(50% - 19rpx);
			}

			.primary3 {
				left: calc(100% - 19rpx);
			}
		}

	}

}
</style>